<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="en">
    <th:block th:include="include :: header('首页')" />
    <th:block th:include="include :: headertable" />
</head>
<body>

<div id="toolbar">
    <button id="addRole" class="layui-btn">+ 添加角色</button>
</div>
<table id="dataTable" class="layui-table"></table>
<th:block th:include="include :: footer" />
<th:block th:include="include :: footertable" />

<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        layui.form.on('submit(*)', function(data){
            config.tableQuery("dataTable",data.field)
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        function operateFormatter(value, row, index) {
            var operateHtml = [];
            operateHtml.push('<button class="layui-btn layui-btn-sm" id="qxsz"><i class="layui-icon">&#xe642;</i>权限设置</button>');
            operateHtml.push('<button class="layui-btn layui-btn-sm  layui-btn-warm" id="edit" ><i class="layui-icon">&#xe642;</i>编辑</button>');
            operateHtml.push('<button class="layui-btn layui-btn-sm  layui-btn-danger" id="del"><i class="layui-icon">&#xe640;</i>删除</button>');
            return operateHtml.join('');
        }

        var operateEvents = {
            'click #del': function (e, value, row, index) {
                config.openConfirmLayer("确定要删除么？","/sysUser/delRole.json",{"id":row.id},function (data) {
                    //obj.del();
                    layer.alert("刪除成功");
                    config.tableRefresh()
                })
            },
            'click #edit': function (e, value, row, index) {
                json = row;
                config.openPageLayer("权限","xtgl/addRole",['500px','420px'],"",false);
            },
            'click #qxsz': function (e, value, row, index) {
                selRoleId=row.roleId;
                config.openPageLayer("权限","xtgl/setRole",['500px','400px']);
            },
        };


        config.initTable("#dataTable","/sysUser/authList.json",[ //表头
                {field: 'id', title: 'ID'}
                ,{field: 'roleName', title: '角色名称'}
                ,{field: 'roleIntro', title: '角色描述'}
                // ,{field: 'statusString', title: '状态',templet:'#status'}
                , {title: '操作', events: operateEvents, formatter: operateFormatter}
            ]
            ,{});
        //监听工具条
        table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var row = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            //var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'edit'){ //查看
            } else if(layEvent === 'del'){ //删除
                config.openConfirmLayer("确定要删除么？","/sysUser/delRole.json",{"id":row.id},function (data) {
                    layer.alert("刪除成功");
                    config.tableRefresh("dataTable")
                })
            } else if(layEvent === 'qxsz'){ //编辑
                selRoleId=row.roleId;
                config.openPageLayer("权限","xtgl/setRole",['500px','400px'],"",false);
            }
        });

        $("#addRole").click(function () {
            json={};
            config.openPageLayer("增加角色","xtgl/addRole",['700px','550px'],"",false);
        });

    })
</script>
<script type="text/html" id="status">
    {{#  if(d.status == 1){ }}
    开启
    {{#  } else { }}
    关闭
    {{#  } }}
</script>
<script type="text/html" id="operate">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="qxset" lay-event="qxsz">权限设置</button>
        <button class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="del">删除</button>
    </div>
</script>


</body>
</html>
